<template>
  <Card title="修改密码":bordered="false">
    <Form ref="registerForm":model="forget":rules="rules" @keydown.enter.native="register">
      <FormItem prop="userName">
        <Input v-model="forget.userName" type="text" placeholder="请输入用户名字" style="width: 260px" >
        <span slot="prepend">
            <Icon :size="20" type="ios-contact"/>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="phone">
        <Input v-model="forget.phone" type="text" placeholder="请输入电话号码" style="width: 260px">
        <span slot="prepend">
            <Icon :size="20" type="ios-call"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="email">
        <Input v-model="forget.email" type="text" placeholder="请输入电子邮件" style="width: 260px">
        <span slot="prepend">
            <Icon :size="20" type="ios-mail"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="password">
        <Input v-model="forget.password" type="password" placeholder="请输入新密码" style="width: 260px">
        <span slot="prepend">
            <Icon :size="20" type="ios-lock"></Icon>
          </span>
        </Input>
      </FormItem>
      <FormItem prop="dataSet">
        <Button type="primary" @click="forgetPassword" long>确认</Button>
      </FormItem>
      <FormItem prop="dataSet">
        <Button type="primary" @click="concel" long>取消</Button>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
    export default {
        name: "forget-form",
      props: {
        userNameRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '用户名不能为空', trigger: 'blur'},
            ]
          }
        },
        passwordRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '密码不能为空', trigger: 'blur'}
            ]
          }
        },
        phoneRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '电话号码不能为空', trigger: 'blur'}
            ]
          }
        },
        emailRules: {
          type: Array,
          default: () => {
            return [
              {required: true, message: '电子邮件不能为空', trigger: 'blur'}
            ]
          }
        },
      },
      data(){
        return {
          forget: {
            userName: '',
            password: '',
            phone: '',
            email:''
          }
        }
      },
      computed: {
        rules() {
          return {
            userName: this.userNameRules,
            password: this.passwordRules,
            phone: this.phoneRules,
            email: this.emailRules,
          }
        }
      },
      methods: {
        forgetPassword() {
          if(this.forget.userName.length<6||this.forget.userName.length>20){
            alert("用户名长度不能小于6或大于20")
          }
          else{
            this.$router.push('/')
          }
        },
        concel() {
          this.$router.push('/')
        }
      }
    }
</script>

<style scoped>

</style>
